<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])
const handleDelete = (id: number) => {
  list.value = list.value.filter(item => item.id !== id)
}
const bookInfo=reactive({
  id: 0,
  name:'',
  author:''
})
const addBook=()=>{
  bookInfo.id=Date.now()
  
//   // 向list.value数组中添加一个新对象，该对象包含书本的信息
// // 这里使用了对象字面量的方式直接构造一个新的书本对象，并添加到列表中
// list.value.push({
//   id: bookInfo.id,
//   name: bookInfo.name,
//   author: bookInfo.author
// })

// // 使用展开运算符将bookInfo对象的属性复制到list.value数组中
// // 这种方式提供了比Object.assign更现代的浅拷贝方法
// list.value.push({...bookInfo})

// 使用Object.assign方法将bookInfo对象的属性复制到一个新创建的对象中，然后添加到list.value数组
// 这种方式是ES6之前常用的浅拷贝方法
list.value.push(Object.assign({}, bookInfo))
}
</script>


<template>
  <div id="app">
    <h3>黑马书架</h3>
    <ol>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="handleDelete(item.id)">删除</button>
      </li>
    </ol>
    <h3>新增图书</h3>
    <input type="text" v-model="bookInfo.name" placeholder="书名"></input><br>
    <input type="text" v-model="bookInfo.author" placeholder="作者"></input><br>
    <button @click="addBook">添加</button>
  </div>
</template>

<style>
div {
  color: #fff;
}
</style>
